<project-header class="top-header"></project-header>
  <project-page>

    <!-- Middle section -->
    <div class="middle-section">
      <div id="scrollable-content" class="middle-container has-scroll">
        <div class="middle-header">
          <div class="container-fluid">
            <breadcrumbs breadcrumbs="breadcrumbs"></breadcrumbs>
            <alerts alerts="alerts"></alerts>
            <div ng-if="!loaded">{{'Loading' | translate}}...</div>
            <div>
              <h1>
                {{deploymentConfigName}}

                <div class="pull-right dropdown" ng-if="deploymentConfig">
                  <!-- Primary Actions -->
                  <button
                      class="btn btn-default hidden-xs"
                      ng-click="startLatestDeployment()"
                      ng-disabled="!canDeploy()">
                    <!--Deploy-->{{'Deploy'| translate}}
                  </button>

                  <!-- Secondary Actions -->
                  <a href="" class="dropdown-toggle resource-actions-dropdown" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i><span class="sr-only">Actions</span></a>
                  <ul class="dropdown-menu actions action-button">
                    <li class="visible-xs-inline" ng-class="{ disabled: !canDeploy() }">
                      <a href=""
                        role="button"
                        ng-attr-aria-disabled="{{canDeploy() ? undefined : 'true'}}"
                        ng-class="{ 'disabled-link': !canDeploy() }"
                        ng-click="startLatestDeployment()"
                        ><i class="fa fa-play fa-fw" aria-hidden="true"></i> Deploy</a>
                    </li>
                    <li>
                      <a href="project/{{projectName}}/set-limits?dcName={{deploymentConfig.metadata.name}}"
                        role="button"
                        ><i class="fa fa-area-chart fa-fw" aria-hidden="true"></i> Set Resource Limits</a>
                    </li>
                    <li>
                      <edit-link
                        resource="deploymentConfig"
                        kind="deploymentconfigs"
                        alerts="alerts">
                      </edit-link>
                    </li>
                    <li>
                      <delete-link
                        resource-type="deploymentconfig"
                        resource-name="{{deploymentConfig.metadata.name}}"
                        project-name="{{deploymentConfig.metadata.namespace}}"
                        alerts="alerts">
                      </delete-link>
                    </li>
                  </ul>
                </div>
                <span ng-if="deploymentConfig.status.details.message" class="pficon pficon-warning-triangle-o" style="cursor: help;" data-toggle="popover" data-placement="right" data-trigger="hover" dynamic-content="{{deploymentConfig.status.details.message}}"></span>
                <small class="meta" ng-if="deploymentConfig"><!--created-->{{'creat'| translate}} <relative-timestamp timestamp="deploymentConfig.metadata.creationTimestamp"></relative-timestamp></small>
              </h1>
              <labels labels="deploymentConfig.metadata.labels" clickable="true" kind="deployments" title-kind="deployment configs" project-name="{{deploymentConfig.metadata.namespace}}" limit="3"></labels>
            </div>
          </div>
        </div><!-- /middle-header-->
        <div class="middle-content">
          <div class="container-fluid">
            <div class="row" ng-if="loaded">
              <div class="col-md-12" ng-class="{ 'hide-tabs' : !deploymentConfig }">
                <uib-tabset>
                  <uib-tab active="selectedTab.details">
                    <uib-tab-heading><!--Details-->{{'Detail'| translate}}</uib-tab-heading>
                    <div class="resource-details" ng-if="deploymentConfig">
                      <div class="row">
                        <div class="col-lg-6">
                          <h3><!--Configuration-->{{'Configura'| translate}}</h3>
                          <dl class="dl-horizontal left">
                            <div ng-if="deploymentConfig.spec.strategy.type">
                                <dt><!--Strategy:-->{{'Strategy'| translate}}</dt>
                                <dd>{{deploymentConfig.spec.strategy.type}}</dd>
                            </div>
                            <div ng-if="deploymentConfig.spec.strategy.rollingParams">
                              <dt><!--Update Period:-->{{'UpdatePeriod'| translate}}</dt>
                              <dd>{{deploymentConfig.spec.strategy.rollingParams.updatePeriodSeconds}} sec</dd>
                              <dt><!--Interval:-->{{'Interval'| translate}}</dt>
                              <dd>{{deploymentConfig.spec.strategy.rollingParams.intervalSeconds}} sec</dd>
                              <dt><!--Timeout:-->{{'Timeout'| translate}}</dt>
                              <dd>{{deploymentConfig.spec.strategy.rollingParams.timeoutSeconds}} sec</dd>
                              <dt>Max Unavailable:</dt>
                              <dd>{{deploymentConfig.spec.strategy.rollingParams.maxUnavailable}}</dd>
                              <dt>Max Surge:</dt>
                              <dd>{{deploymentConfig.spec.strategy.rollingParams.maxSurge}}</dd>
                            </div>
                            <!-- TODO: Surface the parameters for the recreate and custom strategies -->
                          </dl>
                          <h3><!--Template-->{{'Template'| translate}}</h3>
                          <dl class="dl-horizontal left">
                            <dt><!--Selectors:-->{{'Selectors' | translate}}</dt><dd ng-if="!deploymentConfig.spec.selector">none</dd>
                            <dd ng-repeat="(selectorLabel, selectorValue) in deploymentConfig.spec.selector">{{selectorLabel}}={{selectorValue}}<span ng-show="!$last">, </span></dd>
                            <dt><!--Replicas:-->{{'Replicas'| translate}}</dt>
                            <dd>
                              <replicas spec="deploymentConfig.spec.replicas" scale-fn="scale(replicas)"></replicas>
                            </dd>
                            <dt>Pod template:</dt>
                            <dd>&nbsp;</dd>
                            <pod-template
                                  pod-template="deploymentConfig.spec.template"
                                  images-by-docker-reference="imagesByDockerReference"
                                  builds="builds"
                                  detailed="true"></pod-template>
                          </dl>
                          <h4 style="margin-top: 20px;"><!--Volumes-->{{'Volumes'| translate}}</h4>
                          <a ng-href="project/{{project.metadata.name}}/attach-pvc?deploymentconfig={{deploymentConfig.metadata.name}}"><!--Attach storage-->{{'Attachstorage'| translate}}</a>
                          <volumes volumes="deploymentConfig.spec.template.spec.volumes" namespace="project.metadata.name"></volumes>
                        </div>
                        <div class="col-lg-6">
                          <h3><!--Triggers-->{{'Triggers'| translate}}</h3>
                          <dl class="dl-horizontal left">
                            <dt><!--Manual (CLI)-->{{'Manual'| translate}}:
                              <a href="{{'deployment-operations' | helpLink}}" target="_blank">
                                <span class="learn-more-block"><!--Learn more-->{{'Learnmore'| translate}} <i class="fa fa-external-link"> </i></span>
                              </a>
                            </dt>
                            <dd>
                              <code>oc deploy {{deploymentConfig.metadata.name}} --latest -n {{project.metadata.name}}</code>
                              <copy-to-clipboard-button clipboard-text="'oc deploy ' + deploymentConfig.metadata.name + ' --latest -n ' + project.metadata.name"></copy-to-clipboard-button>
                            </dd>
                            <div ng-repeat="trigger in deploymentConfig.spec.triggers">
                              <span ng-switch="trigger.type">
                                <span ng-switch-default>{{trigger.type}}</span>
                                <span ng-switch-when="ImageChange" ng-if="trigger.imageChangeParams.from">
                                  <dt><!--New image for:-->{{'Newimage'| translate}}</dt>
                                  <dd>{{trigger.imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</dd>
                                </span>
                                <span ng-switch-when="ConfigChange">
                                  <dt><!--Change of:-->{{'Changeof'| translate}}</dt>
                                  <dd><!--Config-->{{'Config'| translate}}</dd>
                                </span>
                              </span>
                            </div>
                          </dl>
                        </div>
                      </div>
                      <annotations annotations="deploymentConfig.metadata.annotations"></annotations>
                    </div>
                    <div ng-if="loaded">
                      <table class="table table-bordered table-hover table-mobile">
                        <thead>
                          <tr>
                            <th><!--Deployment-->{{'Deployment'| translate}}</th>
                            <th><!--Status-->{{'Status'| translate}}</th>
                            <th><!--Created-->{{'Created'| translate}}</th>
                            <th><!--Trigger-->{{'Trigger'| translate}}</th>
                          </tr>
                        </thead>
                        <tbody ng-if="(deployments | hashSize) == 0">
                          <tr><td colspan="4"><em>{{emptyMessage}}</em></td></tr>
                        </tbody>
                        <tbody ng-repeat="deployment in deployments | orderObjectsByDate : true">
                          <tr>
                            <td data-title="Deployment">
                              <!-- Deployment number and link -->
                              <span ng-if="deployment | annotation : 'deploymentVersion'">
                                <a ng-href="{{deployment | navigateResourceURL}}">#{{deployment | annotation : 'deploymentVersion'}}</a>
                                <span ng-if="deploymentConfig.status.latestVersion == (deployment | annotation : 'deploymentVersion')">(latest)</span>
                              </span>
                            </td>
                            <td data-title="Status">
                              <div row class="status">
                                <status-icon status="deployment | deploymentStatus" disable-animation></status-icon>
                                <span flex>
                                  {{deployment | deploymentStatus}}<span ng-if="(deployment | deploymentStatus) == 'Deployed' || (deployment | deploymentStatus) == 'Running'">,
                                  <span ng-if="deployment.spec.replicas !== deployment.status.replicas">{{deployment.status.replicas}}/</span>{{deployment.spec.replicas}} replica<span ng-if="deployment.spec.replicas != 1">s</span></span>
                                </span>
                                <!-- TODO would be nice to have the deploymentStatusReason in a popup, when there is one -->
                              </div>
                            </td>
                            <td data-title="Createed">
                              <relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp>
                              <span>- {{deployment.metadata.creationTimestamp | date : 'short'}}</span>
                            </td>
                            <td data-title="Trigger">
                              <span ng-if="!deployment.causes.length">Unknown</span>
                              <span ng-if="deployment.causes.length">
                                <span ng-repeat="cause in deployment.causes">
                                  <span ng-switch="cause.type">
                                    <span ng-switch-when="ImageChange">
                                      <span ng-if="cause.imageTrigger.from">
                                        <abbr title="{{cause.imageTrigger.from | imageObjectRef : null : true}}">Image</abbr> change
                                      </span>
                                    </span>
                                    <span ng-switch-when="ConfigChange">Config change</span>
                                    <span ng-switch-default>{{cause.type}}</span>
                                  </span>
                                </span>
                              </span>
                          </td>
                        </tr>
                      </tbody>
                      </table>
                    </div>
                  </uib-tab>
                  <uib-tab heading="Environment" active="selectedTab.environment" ng-if="deploymentConfig">
                    <uib-tab-heading><!--Environment-->{{'Environment'| translate}}</uib-tab-heading>
                    <div ng-repeat="container in deploymentConfig.spec.template.spec.containers">
                      <h3><!--Container-->{{'Container' | translate}} {{container.name}}</h3>
                      <environment env-vars="container.env" ng-if="container.env.length"></environment>
                      <em ng-if="!container.env.length">The container specification has no environment variables set.</em>
                    </div>
                  </uib-tab>
                  <uib-tab active="selectedTab.events">
                    <uib-tab-heading><!--Events-->{{'events'| translate}}</uib-tab-heading>
                    <events resource-kind="DeploymentConfig" resource-name="{{deploymentConfig.metadata.name}}" project-context="projectContext" ng-if="selectedTab.events"></events>
                  </uib-tab>
                </uib-tabset>
              </div><!-- /col-* -->
            </div>
          </div>
        </div><!-- /middle-content -->
      </div><!-- /middle-container -->
    </div><!-- /middle-section -->
  </project-page>
